<script setup lang="ts">
import { reactive, ref, computed, onBeforeUnmount } from 'vue'
import { Modal, message } from 'ant-design-vue'
import StatusIndicator from './StatusIndicator.vue'

// 新增选中状态管理
const selectedTask = ref('T2024001')

const detailVisible = ref(false)

// 异常学生数据示例
const abnormalStudents = ref([
  { id: '1002', name: '张晓晓' },
  { id: '1015', name: '付小明' },
  { id: '1017', name: '吴小娴' },
  { id: '1034', name: '郭小小' },
])

// 考场基本信息
const examInfo = ref([
  { label: '学校名称', value: '吉林一中' },
  { label: '监考机名称', value: '吉林一考场' },
  { label: '批次', value: '5' },
  { label: '考场任务编号', value: '123' },
  { label: '总人数', value: '100' },
  { label: '待考', value: '96人' },
  { label: '完成', value: '4人' },
])

// 新增任务与考生的映射关系
const taskStudentMap = {
  T2024001: [
    {
      id: 'S001',
      name: '张三',
      paper: '人机对话模拟测试',
      ip: '192.168.1.101',
      connectionStatus: 'connected',
      loginStatus: 'logged',
      time: '2024-03-20 09:30',
      progress: '85%',
      num: '001',
    },
  ],
  T2024002: [
    {
      id: 'S002',
      name: '李四',
      paper: '人机对话模拟测试',
      ip: '192.168.1.101',
      connectionStatus: 'disconnected',
      loginStatus: 'unlogged',
      time: '2024-03-20 09:30',
      progress: '85%',
      num: '002',
    },
    {
      id: 'S003',
      name: '王五',
      paper: '人机对话模拟测试',
      ip: '192.168.1.101',
      connectionStatus: 'disconnected',
      loginStatus: 'unlogged',
      time: '2024-03-20 09:30',
      progress: '85%',
      num: '003',
    },
    {
      id: 'S003',
      name: '王五',
      paper: '人机对话模拟测试',
      ip: '192.168.1.101',
      connectionStatus: 'disconnected',
      loginStatus: 'unlogged',
      time: '2024-03-20 09:30',
      progress: '85%',
      num: '003',
    },
    {
      id: 'S003',
      name: '王五',
      paper: '人机对话模拟测试',
      ip: '192.168.1.101',
      connectionStatus: 'disconnected',
      loginStatus: 'unlogged',
      time: '2024-03-20 09:30',
      progress: '85%',
      num: '003',
    },
    {
      id: 'S003',
      name: '王五',
      paper: '人机对话模拟测试',
      ip: '192.168.1.101',
      connectionStatus: 'disconnected',
      loginStatus: 'unlogged',
      time: '2024-03-20 09:30',
      progress: '85%',
      num: '003',
    },
    {
      id: 'S003',
      name: '王五',
      paper: '人机对话模拟测试',
      ip: '192.168.1.101',
      connectionStatus: 'disconnected',
      loginStatus: 'unlogged',
      time: '2024-03-20 09:30',
      progress: '85%',
      num: '003',
    },
    {
      id: 'S003',
      name: '王五',
      paper: '人机对话模拟测试',
      ip: '192.168.1.101',
      connectionStatus: 'disconnected',
      loginStatus: 'unlogged',
      time: '2024-03-20 09:30',
      progress: '85%',
      num: '003',
    },
    {
      id: 'S003',
      name: '王五',
      paper: '人机对话模拟测试',
      ip: '192.168.1.101',
      connectionStatus: 'disconnected',
      loginStatus: 'unlogged',
      time: '2024-03-20 09:30',
      progress: '85%',
      num: '003',
    },
    {
      id: 'S003',
      name: '王五',
      paper: '人机对话模拟测试',
      ip: '192.168.1.101',
      connectionStatus: 'disconnected',
      loginStatus: 'unlogged',
      time: '2024-03-20 09:30',
      progress: '85%',
      num: '003',
    },
    {
      id: 'S003',
      name: '王五',
      paper: '人机对话模拟测试',
      ip: '192.168.1.101',
      connectionStatus: 'disconnected',
      loginStatus: 'unlogged',
      time: '2024-03-20 09:30',
      progress: '85%',
      num: '003',
    },
    {
      id: 'S003',
      name: '王五',
      paper: '人机对话模拟测试',
      ip: '192.168.1.101',
      connectionStatus: 'disconnected',
      loginStatus: 'unlogged',
      time: '2024-03-20 09:30',
      progress: '85%',
      num: '003',
    },
    {
      id: 'S003',
      name: '王五',
      paper: '人机对话模拟测试',
      ip: '192.168.1.101',
      connectionStatus: 'disconnected',
      loginStatus: 'unlogged',
      time: '2024-03-20 09:30',
      progress: '85%',
      num: '003',
    },
    {
      id: 'S003',
      name: '王五',
      paper: '人机对话模拟测试',
      ip: '192.168.1.101',
      connectionStatus: 'disconnected',
      loginStatus: 'unlogged',
      time: '2024-03-20 09:30',
      progress: '85%',
      num: '003',
    },
  ],
  T2024003: [],
}

// 修改考生数据为计算属性
const currentStudents = computed(() => taskStudentMap[selectedTask.value] || [])

// 新增点击处理方法
const handleTaskClick = (task: { taskId: string }) => {
  selectedTask.value = task.taskId
  currentTask.value = task.taskId
}

const studentColumns = [
  { title: '序号', dataIndex: 'index', customRender: ({ index }) => index + 1 },
  { title: '考生考号', dataIndex: 'id' },
  { title: '考生姓名', dataIndex: 'name' },
  { title: '试卷名称', dataIndex: 'paper' },
  { title: 'IP地址', dataIndex: 'ip' },
  { title: '连接状态', dataIndex: 'connectionStatus' },
  { title: '登录状态', dataIndex: 'loginStatus' },
  { title: '记录时间', dataIndex: 'time' },
  { title: '答题进度', dataIndex: 'progress' },
  { title: '机位号', dataIndex: 'num' },
]

// 考务数据
const examData = reactive([
  { taskId: 'T2024001', status: '在考' },
  { taskId: 'T2024002', status: '待考' },
  { taskId: 'T2024003', status: '已结束' },
])

// 操作按钮配置
const operationButtons = reactive([
  { label: '唤醒考试机', color: '#F8AC30' },
  { label: '允许登录', color: '#1E2585' },
  { label: '开始考试', color: '#0EB828' },
  { label: '结束考试', color: '#FF0000' },
  { label: '考场详情', color: '#128BF1' },
])

// 当前任务
const currentTask = ref('T2024001')

// 考试状态控制
const examStatus = ref('idle') // idle | ongoing | ended
const examTime = ref(5400) // 初始值1小时30分钟（5400秒）
const timer = ref(null)
const isTimerRunning = ref(false) // 新增计时器运行状态

// 格式化考试时间
const formattedTime = computed(() => {
  const hours = Math.floor(examTime.value / 3600)
    .toString()
    .padStart(2, '0')
  const minutes = Math.floor((examTime.value % 3600) / 60)
    .toString()
    .padStart(2, '0')
  const seconds = (examTime.value % 60).toString().padStart(2, '0')
  return `${hours}:${minutes}:${seconds}`
})

// 开始考试
const startExam = () => {
  if (examStatus.value !== 'ongoing') {
    examStatus.value = 'ongoing'
    isTimerRunning.value = true
    timer.value = setInterval(() => {
      if (examTime.value > 0) {
        examTime.value--
      } else {
        clearInterval(timer.value)
        examStatus.value = 'ended'
        isTimerRunning.value = false
      }
    }, 1000)
  }
}

// 结束考试
const endExam = () => {
  if (isTimerRunning.value) {
    clearInterval(timer.value)
    examStatus.value = 'ended'
    isTimerRunning.value = false
  }
}
// 清理定时器
onBeforeUnmount(() => {
  clearInterval(timer.value)
})

// 统一按钮处理器
const handleButtonClick = (btnLabel) => {
  switch (btnLabel) {
    case '开始考试':
      startExam()
      break
    case '结束考试':
      endExam()
      break
    case '考场详情':
      detailVisible.value = true
      break
    // 其他按钮处理可在此扩展
  }
}

// 检查答题包
const checkAnswerPackage = () => {
  message.success('检查已完成！所有答题包正常！')
}
</script>

<!-- src/renderer.vue -->
<template>
  <a-layout class="main-container">
    <!-- 左侧考务列表 -->
    <a-layout-sider :width="356" class="exam-list-sider" theme="light">
      <!-- 新增标题 -->
      <div class="sider-title">考务列表</div>

      <!-- 列表表头 -->
      <div class="list-header">
        <span class="index">序号</span>
        <span class="task-id">任务号</span>
        <span class="status">状态</span>
      </div>

      <!-- 列表内容 -->
      <div class="exam-list">
        <div
          v-for="(item, index) in examData"
          :key="item.taskId"
          class="exam-item"
          :class="{
            selected: selectedTask === item.taskId,
          }"
          @click="handleTaskClick(item)"
        >
          <span class="index">{{ index + 1 }}</span>
          <span class="task-id">{{ item.taskId }}</span>
          <span class="status">{{ item.status }}</span>
        </div>
      </div>
    </a-layout-sider>

    <!-- 右侧主内容 -->
    <a-layout>
      <!-- 操作栏 -->
      <a-layout-header class="operation-bar">
        <div class="task-info">任务号：{{ currentTask }}</div>
        <div class="action-buttons">
          <a-button
            v-for="(btn, index) in operationButtons"
            :key="index"
            class="action-btn"
            :disabled="
              (btn.label === '开始考试' && examStatus === 'ongoing') ||
                (btn.label === '结束考试' && !isTimerRunning)
            "
            :style="{
              backgroundColor: btn.color,
              borderColor: btn.color,
              opacity: btn.label === '结束考试' && !isTimerRunning ? 0.3 : 1,
            }"
            @click="handleButtonClick(btn.label)"
          >
            {{ btn.label }}
          </a-button>
        </div>
      </a-layout-header>

      <!-- 考生列表 -->
      <a-layout-content class="student-list-content">
        <div class="summary-info">
          <span>考试模式：人机对话 机位总数：100</span>
          <div
            class="exam-timer"
            :style="{
              /* 原有样式保持不变 */
              color: isTimerRunning ? '#1165E8' : '#999999',
            }"
          >
            {{ formattedTime }}
          </div>
        </div>

        <div class="table-container">
          <a-table
            :columns="studentColumns"
            :data-source="currentStudents"
            :pagination="false"
            bordered
            :scroll="{y: 'calc(100vh - 280px)'}"
          >
            <template #bodyCell="{column, record}">
              <template v-if="column.dataIndex === 'connectionStatus'">
                <status-indicator :type="record.connectionStatus" />
                {{ record.connectionStatus === 'connected' ? '已连接' : '未连接' }}
              </template>
              <template v-if="column.dataIndex === 'loginStatus'">
                <status-indicator :type="record.loginStatus" />
                {{ record.loginStatus === 'logged' ? '已登录' : '未登录' }}
              </template>
            </template>
          </a-table>
        </div>
      </a-layout-content>
    </a-layout>
  </a-layout>

  <!-- 详情弹窗 -->
  <Modal v-model:open="detailVisible" title="查看考场详情" width="520px" :footer="null" centered>
    <div class="detail-container">
      <!-- 基本信息表格 -->
      <div class="info-table">
        <div v-for="(item, index) in examInfo" :key="index" class="table-row">
          <div class="table-header">{{ item.label }}</div>
          <div class="table-content">{{ item.value }}</div>
        </div>
      </div>

      <!-- 异常提示框 -->
      <div class="alert-box">
        <div class="alert-header">
          <span class="alert-icon">!</span>
          <span class="alert-title">本考场状态异常4场!</span>
        </div>
        <div class="alert-content">
          <div class="alert-subtitle">缺考学生名单：总计 4个</div>
          <div class="student-list">
            <div v-for="student in abnormalStudents" :key="student.id" class="student-item">
              学号：{{ student.id }} 姓名：{{ student.name }}
            </div>
          </div>
        </div>
      </div>

      <!-- 操作按钮 -->
      <a-button class="check-btn" @click="checkAnswerPackage">检查答题包</a-button>
    </div>
  </Modal>
</template>

<style scoped>
.exam-item {
  display: grid;
  grid-template-columns: 60px 1fr 80px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background-color 0.3s;

  /* 默认悬停效果 */
  &:hover:not(.selected) {
    background-color: #eff6ff;
  }

  /* 选中状态 */
  &.selected {
    background-color: #1165e8;
    color: white;

    /* 选中状态悬停保持原色 */
    &:hover {
      background-color: #1165e8;
    }
  }
}

.sider-title {
  font-family: Hiragino Sans GB;
  font-weight: normal;
  font-size: 16px;
  color: #262626;
  line-height: 50px;
}

.main-container {
  background: #f7f7f7;
  height: 100vh;
  display: flex;
}

.exam-list-sider {
  background: white;
  padding: 16px;
  height: 956px;
  border-right: 1px solid #f0f0f0;
  margin-top: 16px;
  margin-left: 16px;
}

.list-header {
  display: grid;
  grid-template-columns: 60px 1fr 80px;
  background: #f7f7f7;
  padding: 12px 16px;
  font-weight: 500;
}

.exam-list {
  margin-top: 8px;
}

.operation-bar {
  background: white;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  margin: 16px 16px 0;
  border-radius: 4px;
}

.action-buttons {
  display: flex;
  gap: 12px;
}

.action-btn {
  color: white !important;
  border-radius: 4px;
  height: 36px;
  min-width: 100px;
}

/* 倒计时过渡动画 */
.exam-timer {
  transition: color 0.3s ease;
}

/* 禁用状态样式增强 */
.action-btn[disabled] {
  opacity: 0.5 !important;
  filter: grayscale(80%);
}

.student-list-content {
  background: white;
  margin: 16px;
  padding: 24px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 120px); /* 根据实际布局调整 */
}

.summary-info {
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

/* 自定义状态指示器 */
.status-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
}

.status-indicator.connected,
.status-indicator.logged {
  background-color: #52c41a;
}

.status-indicator.disconnected,
.status-indicator.unlogged {
  background-color: #ff4d4f;
}

.exam-timer {
  width: 103px;
  height: 19px;
  font-family: Roboto;
  font-weight: bold;
  font-size: 24px;
  color: #1165e8;
}

.detail-container {
  padding: 16px;
}

/* 基本信息表格样式 */
.info-table {
  border: 1px solid #f0f0f0;
  margin-bottom: 16px;
}

.table-row {
  display: flex;
  border-bottom: 1px solid #f0f0f0;
  &:last-child {
    border-bottom: none;
  }
}

/* 异常提示框样式 */
.alert-box {
  width: 417px;
  height: 136px;
  background: rgba(255, 0, 0, 0.08);
  margin: 0 auto 16px;
  padding: 12px;
}

.alert-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.alert-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ff4d4f;
  color: white;
  text-align: center;
  line-height: 16px;
  margin-right: 8px;
}

.alert-title {
  color: #ff4d4f;
  font-weight: 500;
}

.alert-subtitle {
  color: rgba(0, 0, 0, 0.85);
  margin-bottom: 8px;
}

.student-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.student-item {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.65);
  white-space: nowrap;
}

/* 检查按钮样式 */
.check-btn {
  width: 101px;
  height: 32px;
  background: #128bf1;
  border-radius: 3px;
  color: white;
  display: block;
  margin: 0 auto;
}

.table-header {
  width: 35%;
  padding: 10px;
  background: #fafafa;
  color: #666;
  border-right: 1px solid #f0f0f0;
}

.table-content {
  width: 65%;
  padding: 10px;
  font-weight: 500;
}

.table-container {
  /* 核心布局属性保持原有 */
  :deep(.ant-table-body) {
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: #2c3e50 #ecf0f1;

    /* Webkit */
    &::-webkit-scrollbar {
      width: 8px;
      background: rgba(236, 240, 241, 0.5);
    }

    &::-webkit-scrollbar-thumb {
      background: #2c3e50;
      border-radius: 4px;
      border: 2px solid transparent;
      background-clip: content-box;
      transition: background 0.3s;

      &:hover {
        background: #34495e;
      }
    }

    &::-webkit-scrollbar-track {
      background: rgba(236, 240, 241, 0.5);
      border-radius: 4px;
      margin: 2px 0;
    }
  }

  :deep(.ant-table) {
    max-height: 100%;
    display: flex;
    flex-direction: column;

    .ant-table-container {
      flex: 1;
      display: flex;
      flex-direction: column;

      .ant-table-body {
        overflow-y: auto !important;
        flex: 1;
      }
    }
  }
}
</style>
